<!DOCTYPE html>
<html>
	<head>
		<title>Hello world</title>
	</head>
	<body>
		<svg id="contenxt" version="1.1" width="500" height="400" xmlns="http://www.w3.org/2000" >
<!-- 			<path d="M 10 10 L 10 90 L 90 90 L 90 10 z" stroke-width="1" stroke="red" fill="transparent"/>
			<circle r="50" cx="150" cy="150" fill="green" stroke="red" stroke-width="2"/>

			<path d="M 200 200 H 300 V 300 H 200 Z" stroke-width="0" stroke="blue" fill="blue"/>

			<path d="M100 10 C 110 10,130 40,150 10  " stroke-width="2" stroke="orange" fill="transparent"/> -->

			<!-- <path d="M10 80 C 40 10,65 10 95 80 S 150 150 ,180 80" stroke-width="2" stroke="red" fill="transparent"/> -->

			<!-- <path d="M10 80 Q 95 10 180 80" stroke-width="1" stroke="black" fill="transparent"/> -->

			<!-- <path d="M10 315 L 110 215 A 30 50 0 0 1 162.55 162.45 L 172.55 152.45 A 30 50 -45 0 1 215.1 109.9 L 315 10" stroke-width="1" stroke="black" fill="green" fill-opacity="0.5"/> -->
			<!-- <circle r="2" cx="110" cy="215" fill="red" stroke="red" stroke-width="1"/> -->
			<!-- <circle r="2" cx="162.55" cy="162.45" fill="red" stroke="red" stroke-width="1"/> -->

			<!-- <path d="M80 80 A 45 45 ,0,0,0,125 125 " stroke-width="1" stroke="red" fill="transparent"/> -->


			<!-- <circle r="2" cx="80" cy="80" fill="red" stroke="red" stroke-width="1"/> -->



  <defs>
      <linearGradient id="Gradient1">
        <stop class="stop1" offset="0%"/>
        <stop class="stop2" offset="50%"/>
        <stop class="stop3" offset="100%"/>
      </linearGradient>
      <linearGradient id="Gradient2" x1="0" x2="0" y1="0" y2="1">
        <stop offset="0%" stop-color="red"/>
        <stop offset="50%" stop-color="black" stop-opacity="0"/>
        <stop offset="100%" stop-color="blue"/>
      </linearGradient>
      <style type="text/css"><![CDATA[
        #rect1 { fill: url(#Gradient1); }
        .stop1 { stop-color: red; }
        .stop2 { stop-color: black; stop-opacity: 0; }
        .stop3 { stop-color: blue; }
      ]]></style>
  </defs>
 
  <rect id="rect1" x="10" y="10" rx="15" ry="15" width="100" height="100"/>
  <rect x="10" y="120" rx="15" ry="15" width="100" height="100" fill="url(#Gradient2)"/>



  <defs>
      <radialGradient id="RadialGradient1">
        <stop offset="0%" stop-color="red"/>
        <stop offset="100%" stop-color="blue"/>
      </radialGradient>
      <radialGradient id="RadialGradient2" cx="0.25" cy="0.25" r="0.25">
        <stop offset="0%" stop-color="red"/>
        <stop offset="100%" stop-color="blue"/>
      </radialGradient>
  </defs>
 
  <rect x="10" y="300" rx="15" ry="15" width="100" height="100" fill="url(#RadialGradient1)"/>   
		</svg>
	</body>
	<script type="text/javascript">
		var svg=document.getElementById("contenxt");
		console.log(svg);
	</script>
</html>